<!-- 需求录入表单设置 -->
<template>
  <div class="index">
    <pageHeader
      :title="title"
      :breadCrumb="breadCrumb"
      :show-back="true"
    ></pageHeader>
    <div class="content">
      <div class="operater">
        <a-input-search
          search-button
          class="input"
          :style="{ width: '320px' }"
          placeholder="单据名称"
        />
        <a-button type="primary" class="btn" @click="addtemplate"
          >新建采购模板</a-button
        >
      </div>
      <div class="title-item">
        <a-space style="margin-left: 40px">
          <div
            style="
              width: 5px;
              height: 23px;
              background-color: rgba(61, 126, 255, 1);
              border: none;
              border-radius: 2px;
            "
          ></div>
          <div>采购申请录入模板</div></a-space
        >
      </div>
      <div class="cards">
        <a-empty v-if="!mokeList.purchaseApply" />

        <DemandCard
          ref="demandCardRef"
          v-for="item in mokeList.purchaseApply"
          :key="item.id"
          :form="item"
          @del="del"
          @statusChange="statusChange"
          @goDemandCreate="goPurchaseApply"
        >
        </DemandCard>
      </div>
      <div class="title-item">
        <a-space style="margin-left: 40px">
          <div
            style="
              width: 5px;
              height: 23px;
              background-color: rgba(61, 126, 255, 1);
              border: none;
              border-radius: 2px;
            "
          ></div>
          <div>采购计划录入模板</div></a-space
        >
      </div>
      <div class="cards">
        <a-empty v-if="!mokeList.purchasePlan" />

        <DemandCard
          ref="demandCardRef"
          v-for="item in mokeList.purchasePlan"
          :key="item.id"
          :form="item"
          @del="del"
          @statusChange="statusChange"
          @goDemandCreate="goPurchasePlan"
        >
        </DemandCard>
      </div>
      <div class="title-item">
        <a-space style="margin-left: 40px">
          <div
            style="
              width: 5px;
              height: 23px;
              background-color: rgba(61, 126, 255, 1);
              border: none;
              border-radius: 2px;
            "
          ></div>
          <div>采购订单录入模板</div></a-space
        >
      </div>
      <div class="cards">
        <a-empty v-if="!mokeList.purchaseOrder" />

        <DemandCard
          ref="demandCardRef"
          v-for="item in mokeList.purchaseOrder"
          :key="item.id"
          :form="item"
          @del="del"
          @statusChange="statusChange"
          @goDemandCreate="goPurchaseOrder"
        >
        </DemandCard>
      </div>
      <!-- <div class="model-title">采购退货录入模板</div>
      <div class="cards">
        <a-empty v-if="!mokeList.purchaseReturn" />

        <DemandCard
          ref="demandCardRef"
          v-for="item in mokeList.purchaseReturn"
          :key="item.id"
          :form="item"
          @del="del"
          @statusChange="statusChange"
          @goDemandCreate="goPurchaseReturn"
        >
        </DemandCard>
      </div> -->
    </div>

    <a-modal
      v-model:visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      width="auto"
    >
      <template #title> 新增模板 </template>
      <a-space>
        <div v-for="(item, index) in setting" :key="index">
          <settingWrap
            @goDetail="goDetail(item)"
            :name="item.name"
            :description="item.description"
            :icon="item.icon"
          ></settingWrap>
        </div>
      </a-space>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import {
    getpurchaseDate,
    putpurchaseDatestatus,
    deletepurchaseDate,
  } from '@/api/buy-management/base-setting/procurement-template/index';
  import dayjs from 'dayjs';
  import { add } from 'lodash';

  const router = useRouter();
  const demandCardRef = ref();
  const visible = ref(false);
  const title: string = '采购模板录入设置';
  const breadCrumb: string[] = ['采购管理', '基础设置', '采购订单录入设置'];
  interface mokeType {
    id: number;
    type: number; // 1需求2订单
    name: string;
    status: number;
    design: { name: string };
    explain: string; // 单据说明
    icon: string;
    orderDesignId: number;
    createdAt: string;
    createUserId: number; // 暂时没哟此字段
    createUserName: string; // 暂时没哟此字段
  }
  const mokeList = ref<mokeType[]>([]);

  const addtemplate = () => {
    visible.value = true;
  };

  //   const goDemandCreate = (params = {}) => {
  //     router.push({
  //       name: 'AddOrderPurchase',
  //       query: params,
  //     });
  //   };

  const setting = reactive([
    {
      name: '采购申请录入设置',
      description: '-主要用于配置不同的采购类型',
      icon: 'icon-settings',
      path: 'AddPurchaseTemplate',
      type: 1,
    },
    {
      name: '采购计划录入设置',
      description: '-主要配置采购录入模板',
      icon: 'icon-settings',
      path: 'AddPurchaseTemplate',
      type: 2,
    },
    {
      name: '采购订单录入设置',
      description: '-主要配置采购需求申请录入模板',
      icon: 'icon-settings',
      path: 'AddPurchaseTemplate',
      type: 3,
    },
    // {
    //   name: '采购退货录入设置',
    //   description: '-主要配置采购订单录入模板',
    //   icon: 'icon-settings',
    //   path: 'AddPurchaseTemplate',
    //   type: 4,
    // },
  ]);

  const goDetail = (item: any) => {
    router.push({
      name: item.path,
      query: { type: item.type },
    });
  };

  // 获取所有需求模板
  const getDemandTemplateAll = async () => {
    try {
      const res = await getpurchaseDate();
      mokeList.value = res;
    } catch (error: unknown) {
      console.log(error);
    }
  };
  // 当某个模板开启，遍历所有状态改成关闭
  const change = (id: number, status: number) => {
    if (status === 1) {
      // 如果是开启
      mokeList.value = mokeList.value.map((item) => {
        item.status = item.id === id ? 1 : 2;
        return item;
      });
    } else {
      // 如果是关闭
      mokeList.value.forEach((item) => {
        if (item.id === id) {
          item.status = 2;
        }
        // return item
      });
    }
  };
  // 修改启用状态
  type updateParams = {
    id: number;
    status: number;
  };
  //多个需求模板状态，只能有一个是开启状态
  const statusChange = async (info: updateParams) => {
    try {
      await putpurchaseDatestatus({
        id: info.id,
        type: info.type,
      });
      getDemandTemplateAll();
    } catch (err: unknown) {
      console.log(err);
    }
  };
  // 删除卡片
  const del = async (id: number) => {
    try {
      await deletepurchaseDate({ id });
      getDemandTemplateAll();
    } catch (error: unknown) {
      console.log(error);
    }
  };
  onMounted(() => {
    getDemandTemplateAll();
  });

  const goPurchaseApply = (params = {}) => {
    router.push({
      name: 'AddPurchaseTemplate',
      query: { id: params.id, type: 1 },
    });
  };
  const goPurchasePlan = (params = {}) => {
    router.push({
      name: 'AddPurchaseTemplate',
      query: { id: params.id, type: 2 },
    });
  };
  const goPurchaseOrder = (params = {}) => {
    router.push({
      name: 'AddPurchaseTemplate',
      query: { id: params.id, type: 3 },
    });
  };
  const goPurchaseReturn = (params = {}) => {
    router.push({
      name: 'AddPurchaseTemplate',
      query: { id: params.id, type: 4 },
    });
  };
  const goPurchaseTask = (params = {}) => {
    router.push({
      name: 'AddPurchaseTemplate',
      query: { id: params.id, type: 5 },
    });
  };

  const handleOk = () => {};

  const handleCancel = () => {};
</script>

<style scoped lang="less">
  .index {
    .content {
      padding: 16px;
    }

    .operater {
      margin: 24px 0;
      display: flex;
      justify-content: space-between;
    }

    .model-title {
      background: rgba(242, 246, 252, 1);
      padding: 16px 24px;
      font-size: 16px;
    }

    .cards {
      padding: 16px 24px;
      display: flex;
      flex-wrap: wrap;
    }
  }

  .title-item {
    // width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
    margin-top: 20px;
  }
</style>
